<template>
  <div class="page">
    <van-sticky :offset-top="46">
      <ul class="serch-ul">
        <li :class="{active:tardeNum==0}" @click="settardeNum(0)">待审核</li>
        <li :class="{active:tardeNum==1}" @click="settardeNum(1)">审核通过</li>
        <li :class="{active:tardeNum==2}" @click="settardeNum(2)">审核拒绝</li>
      </ul>
    </van-sticky>
    <ul class="contentBox">
      <li class="qiugou" v-for="(i, index) in list" :key="index">
        <p class="p1">
          <span class="title dh">
            <van-icon class="icontitle" :name="icongm" />
            {{i.kname}}
          </span>
          <span class="title title2">发布时间： {{i.inputdate}}</span>
        </p>
        <div class="gongying">
          <div class="gongyingleft">
            <img v-if="!i.img" src="../../assets/img/meetnull.jpg" alt />
            <img v-else v-lazy="i.img" alt />
          </div>
          <div class="gongyingright">
            <p class="p2">
              <span class="p-text">
                价格：
                <span class="p-show">{{i.price}}</span>
              </span>
              <span class="p-text">
                数量：
                <span class="p-show">{{i.nums}}</span>
              </span>
              <span class="p-info">{{i.content}}</span>
            </p>
          </div>
        </div>
        <div class="operate">
          <span class="phone" @click="edit(i,index)">编辑</span>
          <span class="phone" @click="del(i,index)">删除</span>
        </div>
      </li>
    </ul>
    <van-popup v-model="show">
      <div class="from">
        <div class="title">{{text}}</div>
        <div class="imgBox simg" v-if="params.img">
          <img class="simg" :src="params.img" alt />
          <i class="van-icon van-icon-delete van-uploader__preview-delete" @click="delImg"></i>
        </div>
        <div class="imgBox" v-else>
          <van-uploader v-model="fileList" :max-count="1" :after-read="afterRead" />
        </div>
        <van-cell-group>
          <van-field label="品名" required v-model="params.kname" placeholder="请输入品名" />
          <van-field label="单位" v-model="params.unit" placeholder="请输入单位" />
          <van-field label="价格" v-model="params.price" placeholder="请输入价格" />
          <van-field label="数量" v-model="params.nums" placeholder="请输入数量" />
          <van-field
            required
             style="height: auto!important;
    padding: 15px !important;"
            v-model="params.content"
            label="留言"
            type="textarea"
            placeholder="请描述下产品的信息（200字以内）"
            rows="3"
            @input="descInput"
            maxlength="200"
          />
        </van-cell-group>
        <div class="btnBox">
          <div class="btn cancle" @click="cancel">取消</div>
          <div class="btn sure" @click="comfirm">提交</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script type="text/ecmascript-6">
import icongm from "../../assets/img/replaypart/icongm.png";
import iconwz from "../../assets/img/replaypart/iconwz.png";
import { getsupplybuylist, postsupplybuydata } from "../../api/replay";
export default {
  data() {
    return {
      icongm,
      iconwz,
      tardeNum: 0,
      list: [],
      opIndex: "",
      show: false,
      text: "",
      params: {
        type: this.$route.query.type,
        state: this.$route.query.state || 0,
        wd: 1,
        content: "",
        kname: "",
        price: "",
        unit: "",
        nums: "",
        img: "",
        op: ""
      },
      fileList: []
    };
  },
  computed: {
    lists() {
      return this.list;
    }
  },
  methods: {
    init() {
      this.params = {
        type: this.$route.query.type,
        state: this.$route.query.state || 0,
        wd: 1,
        content: "",
        kname: "",
        price: "",
        unit: "",
        nums: "",
        img: "",
        op: ""
      };
    },
    delImg() {
      this.params.img = "";
    },
    edit(i, index) {
      this.show = true;
      this.opIndex = index;
      if (i.type == 1) {
        this.text = "发布求购";
      } else {
        this.text = "发布供应";
      }
      let obj = JSON.parse(JSON.stringify(i));
      this.params = obj;
      this.params.op = "edit";
    },
    del(i, index) {
      let title = "";
      let message = "";
      if (i.type == 1) {
        title = "删除求购";
      } else {
        title = "删除供应";
      }
      this.$dialog
        .confirm({
          message: title
        })
        .then(() => {
          let obj = JSON.parse(JSON.stringify(i));
          this.params = obj;
          this.params.op = "del";
          this.delSet(this.params, index);
        })
        .catch(() => {
          // this.$toast("取消删除");
        });
    },
    delSet(i, index) {
      postsupplybuydata(i).then(res => {
        if (res.code == "0000") {
          this.list.splice(index, 1);
          this.$toast("删除成功");
        } else {
          this.$toast(res.msg);
        }
      });
    },
    descInput() {
      if (this.params.content.length >= 200) {
        this.$toast("最多填写200字");
        return false;
      }
    },
    afterRead() {},
    cancel() {
      this.show = false;
    },
    comfirm() {
      if (!this.params.kname) {
        this.$toast("品名不可以为空");
        return false;
      }
      if (!this.params.content) {
        this.$toast("商品描述不可以为空");
        return false;
      }
      if (this.fileList.length > 0) {
        this.params.img = this.fileList[0].content;
      }
      postsupplybuydata(this.params).then(res => {
        if (res.code == "0000") {
          this.$toast("修改成功");
          this.show = false;
          this.$set(this.list, this.opIndex, this.params);
        } else {
          this.$toast(res.msg);
        }
      });
    },
    getList(obj) {
      getsupplybuylist(obj).then(res => {
        if (res.code == "0000") {
          this.list = res.data;
        } else if (res.code == "1100") {
          this.list = [];
          this.$toast("没有更多数据");
        } else {
          this.$toast(res.msg);
        }
      });
    },
    settardeNum(i) {
      this.init();
      this.tardeNum = i;
      this.params.state = i;
      this.getList(this.params);
    }
  },
  created() {
    this.getList(this.params);
  }
};
</script>
<style scoped  lang="less">
.page {
  min-height: 100%;
  background: #ffffff;
}
.contentBox {
  background: #efefef;
}
.qiugou {
  padding: 0.3rem;
  margin-bottom: 0.3rem;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 3px 8px 0 rgba(0, 10, 0, 0.2);
  position: relative;
  .operate {
    display: block;
    height: 0.4rem;
    position: absolute;
    right: 0.3rem;
    bottom: 0.3rem;
    .phone {
      margin-left: 0.2rem;
      color: #e49829;
    }
  }
  .gongying {
    display: flex;
    position: relative;
    .gongyingleft {
      width: 1.6rem;
      height: 1.68rem;
      margin-right: 0.3rem;
      border-radius: 0.16rem;
      display: flex;
      position: relative;
      top: -0.06rem;
    }
    .gongyingright {
      width: 100%;
      flex: 1;
    }
  }

  .p1 {
    display: flex;
    margin-bottom: 0.3rem;
    &:last-child {
      margin-bottom: 0;
    }
    .title {
      width: 50%;
      overflow: hidden;
      font-size: 0.32rem;
      font-weight: bolder;
      color: rgba(39, 41, 55, 1);
      position: relative;
      height: 0.46rem;
      line-height: 0.46rem;
      padding-left: 0.5rem;
      position: relative;
      .icontitle {
        width: 0.4rem;
        height: 0.4rem;
        font-size: 0.4rem;
        margin-right: 0.1rem;
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -0.2rem;
      }
    }
    .title2 {
      text-align: right;
      font-size: 0.26rem;
      font-weight: normal;
      color: rgba(228, 152, 41, 1);
      .icontitle {
        width: 0.28rem;
        height: 0.28rem;
        font-size: 0.28rem;
      }
    }
  }
  .p2 {
    display: flex;
    flex-wrap: wrap;
  }
  .p-text {
    width: 50%;
    overflow: hidden;
    font-size: 0.26rem;
    margin-bottom: 0.1rem;
    color: rgba(110, 111, 117, 1);
  }
  .p-show {
    color: rgba(39, 41, 55, 1);
  }
  .p-info {
    color: rgba(39, 41, 55, 1);
    line-height: 1.5;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
  }
}
.serch-ul {
  width: 100%;
  height: 1rem;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ffffff;
  box-shadow: 0 1px 2px 0 rgba(0, 10, 0, 0.2);
  li {
    width: 49%;
    height: 100%;
    font-size: 0.3rem;
    color: rgba(110, 111, 117, 1);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    &.active {
      font-weight: 500;
      color: rgba(228, 152, 41, 1);
      &::after {
        position: absolute;
        left: 50%;
        margin-left: -0.16rem;
        content: "";
        display: block;
        width: 0.32rem;
        height: 0.08rem;
        background: rgba(228, 157, 53, 1);
        border-radius: 0.05rem;
        bottom: 0;
      }
    }
  }
}
.van-popup {
  border-radius: 0.2rem;
  overflow: hidden;
}
.from {
  width: 7rem;
  padding: 0 0.1rem;
  .imgBox {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    margin: 0 auto;
    &.simg {
      padding-bottom: 10px;
      img {
        width: 80px;
        height: 80px;
      }
      .van-uploader__preview-delete {
        bottom: 10px;
        right: 5px;
        height: 18px;
      }
    }
  }
  .sort-box {
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 0.3rem;
    .name {
      flex: none;
      width: 90px;
    }
    .sort-btn {
      width: 100%;
      height: 100%;
      flex: 1;
      display: flex;
      .btn {
        width: 40%;
        display: flex;
        align-items: center;
      }
      .van-switch {
        margin-left: 0.1rem;
      }
    }
  }
  .title {
    font-size: 0.4rem;
    font-weight: bolder;
    color: #e49829;
    line-height: 1.3rem;
    text-align: center;
  }
  .btnBox {
    width: 100%;
    height: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    .btn {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #e49829;
    }
    .cancle {
      color: #666666;
      border-right: 0.01rem solid #efefef;
    }
  }
}
.applyInput {
  padding: 10px 15px;
}
.numberV {
  width: 90px;
  display: inline-block;
}
</style>
